<template>
	<view class="container">
		<view class="position">
			<view class="position-text">
				<view class="left">
					<view class="">{{data.title}}</view>
					<view class="botm">
						<view class="lefts">{{data.address}}</view>
						<!-- <view class="">554m</view> -->
					</view>
				</view>
				<view class="right" @click="lookmap">
					<image src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1731056342343.png"></image>
				</view>
			</view>
		</view>

		<view class="pickupmode-box" v-if="data.type">
			<view class="pickupmode" :class="data.payobj.model == 0?'ac':''" @click="selmodel(0)">
				<image src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1731056668908.png"></image>
				<view class="pickupmode-info">
					堂食 <text>店内用餐</text>
				</view>
				<view class="pickupmode-checked" v-if="data.payobj.model == 0">
					<uni-icons color=" #a7d400" type="checkbox-filled" size="30"></uni-icons>
				</view>

			</view>
			<view class="pickupmode" :class="data.payobj.model == 1?'ac':''" @click="selmodel(1)">
				<image src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1731056689375.png"></image>
				<view class="pickupmode-info">
					外带 <text>店内自提带走</text>
				</view>
				<view class="pickupmode-checked" v-if="data.payobj.model == 1">
					<uni-icons color="#a7d400" type="checkbox-filled" size="30"></uni-icons>
				</view>

			</view>
		</view>
		<view class="paylist">
			<radio-group @change="radioChange">
				<label class="" v-for="(item, index) in paylist" :key="item.value">
					<view class="paylists" v-if="item.show=='1'">
						<view class="left">
							<image :src="item.url" mode="aspectFill"></image>{{item.name}}
						</view>
						<view>
							<radio color="#0bc4e3" :value="item.id" :checked="item.id == data.payobj.pay_type" />
						</view>
					</view>
				</label>
			</radio-group>
		</view>
		<view class="order-info">
			<!-- 	<view class="order-info-item">
				联系电话
				<input class="uni-input" focus v-model="data.mobile" />
			</view> -->
			<view class="order-info-item">
				商品信息
				<text>共{{data.paylist.length}}件商品</text>
			</view>
			<scroll-view class="" scroll-y="true" :scroll-with-animation="true" style="height: calc(400px)">
				<view class="order-info-item" v-for="(item,index) in data.paylist" :key="index">
					<view class="productInfo-item">
						<image :src="item.listImage"></image>
						<view class="productInfo-item-box">
							<view class="item-box-title">
								{{item.itemName}}
								<view class="item-box-tips-box">
									<view class="item-box-tips2">
										<view>
											<view>{{item.selective}}</view>
											<view v-if="item.selcharge">加料：{{item.selcharge}}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="item-box-bottom">
								<view class="price">
									<text>¥</text>
									{{item.price}}
									<text class="txt Al_Medium" style="color: red;">￥{{item.amount}} +
										zkfc:{{$toFiexd((item.price-item.amount),2) }}</text>
								</view>
								<view class="number Al_Medium">x{{item.quantity}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="bootm" v-if="!pluginShowing">
			<view class="fixed-menu">
				<view class="fixed-menu-price">
					<view class="fixed-menu-money">
						<view class="Al_Bold money">
							<view class="fixed-menu-money-font1">
								{{data.totalprice}}

							</view>
							<view class="fixed-menu-money-font1-line"></view>
							<view class="mingInfo" v-if="data.deliveryPrice>0">
								<view style="color: rgb(209, 33, 40);">配送费：￥{{data.deliveryPrice}}</view>
								<!-- <view class="paybtnInfo-icon-up"></view> -->
							</view>
						</view>
						<view class="other-tips">￥{{data.totalamount}} + zkfc:{{data.totalzkfc}}</view>
					</view>
				</view>
				<view class="fixed-menu-pay" @click="gopay">去付款</view>
			</view>
		</view>
		<rudon-payWithPassword :displayByParent="pluginShowing" :pwdLength="6" :zkfc="data.totalzkfc"
			:price="data.totalamount" :amount="data.totalprice" titleWindow="请输入支付密码" titleAmount="支付购买商品" desc=" "
			descColor="#FB7B00" :needLog="true" :plaintext="false" @whenFullfilled="whenPwdReady"
			@shutDownPlugin="shutDownPlugin">
		</rudon-payWithPassword>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onUnload,
		onShow,
	} from "@dcloudio/uni-app";
	const {
		proxy
	} = getCurrentInstance();
	let pluginShowing = ref(false)
	let address = ref({
		id: ''
	})
	let isFlag = ref(0) // 支付定时判断
	let paylist = ref([]) //支付方式
	let data = reactive({
		merdetails: {}, //商家详情
		merchant: "",
		order: "",
		money: "",
		store_code: '',
		lng: '',
		lat: '',
		title: '',
		address: '',
		payobj: {
			model: 0,
			address_id: null,
			goods: [],
			store_code: '',
			pay_type: 0,
			is_h5: '',
			password: '',
		},
		totalprice: 0,
		totalzkfc: 0,
		totalamount: 0,
		mobile: '',
		paylist: [],
		type: true,
		order_type: 1,
		deliveryPrice: 0, //配送费
	})
	onLoad((opt) => {

		data.store_code = opt.id
		data.store_code = opt.id
		data.title = opt.title
		data.address = opt.address
		data.deliveryPrice = parseFloat(opt.deliveryPrice)
		data.payobj.address_id = parseFloat(opt.addressid) || null
		data.lng = parseFloat(opt.lng)
		data.lat = parseFloat(opt.lat)
		paylist.value = uni.getStorageSync('payType')
		paylist.value[2].show = 1
		paylist.value.push({
			id: '4',
			name: 'DD',
			show: '1',
			url: paylist.value[1].url,
		})
		console.log("paylist", paylist.value)
	})
	onShow(() => {

		data.payobj.goods = uni.getStorageSync('goods');
		data.merdetails = uni.getStorageSync('merdetails')
		data.mobile = uni.getStorageSync('userInfo').mobile;
		data.paylist = uni.getStorageSync('paylist')

		data.type = uni.getStorageSync('nayukitype') //判断是外卖还是堂食
		if (data.type) {
			data.payobj.model = 0
			data.order_type = 1
		} else {
			data.payobj.model = 2
			data.order_type = 2
		}
		isFlag.value = uni.getStorageSync('ordertype') || 0
		uni.setStorageSync('ordertype', 0)
		if (isFlag.value == 1) {
			getpayresylt(5)
		}

		getGoods()
	})

	//查看地图
	function lookmap() {
		uni.openLocation({
			latitude: data.lat,
			longitude: data.lng,
			success: function() {}
		});
	}

	//付款
	function whenPwdReady(e) {
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		setTimeout(function() {
			uni.hideLoading();
		}, 2000);
		data.payobj.password = e
		proxy.$request({
			url: `api/openapi/nayuki/createOrder/`,
			method: 'post',
			data: data.payobj,
			success: (res) => {
				uni.showToast({
					icon: 'none',
					title: res.errmsg
				})
				pluginShowing.value = false
				if (res.errno == 0) {
					uni.setStorageSync('paysuccess', true);
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						})
					}, 500)
				}


			}
		})
	}

	function gohome() {
		uni.navigateBack()
	}

	function getGoods() {
		let money = 0
		let zkfc = 0
		let amount = 0
		data.paylist.forEach((it) => {
			it.price = parseFloat(it.price)
			it.amount = parseFloat(it.amount)
			money += parseFloat(it.price)
			amount += parseFloat(it.amount)

			zkfc += parseFloat(it.price - it.amount)
		})
		data.totalprice = (money + data.deliveryPrice).toFixed(2)
		data.totalzkfc = zkfc.toFixed(2)
		data.totalamount = amount.toFixed(2)
	}
	//付款
	function gopay() {
		isFlag.value = 1
		uni.setStorageSync('ordertype', isFlag.value);
		if (JSON.stringify(address.value) == '{}') {
			uni.showToast({
				icon: 'none',
				title: '请选择收货地址'
			})
			return
		}
		data.payobj.store_code = data.store_code
		// #ifdef APP
		data.payobj.is_h5 = 1
		// #endif
		// #ifdef H5
		data.payobj.is_h5 = 0
		// #endif

		data.payobj.password = ""
		if (data.payobj.pay_type == 0 || data.payobj.pay_type == 4) {

			pluginShowing.value = true
		} else if (data.payobj.pay_type == 1) {

			// 微信支付
			proxy.$request({
				url: `api/openapi/nayuki/createOrder/`,
				method: 'post',
				data: data.payobj,
				success: (res) => {
					if (res.errno == 0) {
						if (proxy.$isWeiXinBrowser()) {
							data.merchant = res.data.id
							data.order = res.data.order
							data.money = res.data.money
							window.location.href =
								`https://tool.guanxikeji.com/scan?merchant=${data.merchant}&order=${data.order}&money=${data.money}`
						} else {
							// #ifdef H5
							// 在浏览器 h5
							let obj = {
								merchant: res.data.id,
								order: res.data.order,
								money: res.data.money,
							}
							let str = window.btoa(encodeURI(JSON.stringify(obj)))
							window.location.href =
								`weixin://dl/business/?appid=wx50891e1b0d1cd768&path=pages/index/index&query=data=${str}&env_version=release`
							// #endif
							// #ifdef MP-WEIXIN
							// 在浏览器 h5
							let obj = {
								merchant: res.data.id,
								order: res.data.order,
								money: res.data.money,
							}
							let str = window.btoa(encodeURI(JSON.stringify(obj)))
							window.location.href =
								`weixin://dl/business/?appid=wx50891e1b0d1cd768&path=pages/index/index&query=data=${str}&env_version=release`

							// 在app
							// #endif
							// 在微信浏览器
							// #ifdef APP
							// toWxMpFn(res.data)
							let obj = {
								merchant: res.data.id,
								order: res.data.order,
								money: res.data.money,
							}
							let str = base64_encode(encodeURI(JSON.stringify(obj)))
							let url =
								`weixin://dl/business/?appid=wx50891e1b0d1cd768&path=pages/index/index&query=data=${str}&env_version=release`
							plus.runtime.openURL(url)
							// #endif
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.errmsg
						})
					}

				}
			})
		}



	}

	function base64_encode(str) {
		var c1, c2, c3;
		var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
		var i = 0,
			len = str.length,
			string = '';

		while (i < len) {
			c1 = str.charCodeAt(i++) & 0xff;
			if (i == len) {
				string += base64EncodeChars.charAt(c1 >> 2);
				string += base64EncodeChars.charAt((c1 & 0x3) << 4);
				string += "==";
				break;
			}
			c2 = str.charCodeAt(i++);
			if (i == len) {
				string += base64EncodeChars.charAt(c1 >> 2);
				string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
				string += base64EncodeChars.charAt((c2 & 0xF) << 2);
				string += "=";
				break;
			}
			c3 = str.charCodeAt(i++);
			string += base64EncodeChars.charAt(c1 >> 2);
			string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
			string += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
			string += base64EncodeChars.charAt(c3 & 0x3F);
		}
		return string;
	}

	function shutDownPlugin() {
		pluginShowing.value = false
	}

	function selmodel(e) {
		data.payobj.model = e
		getGoods()
	}
	//查看是否支付成功
	function getpayresylt(num) {
		proxy.$request({
			url: `api/paymentQuery/?order=${1}`,
			method: 'get',
			success: (res) => {
				if (res.errno == 0) {
					clearInterval(settime.value)
					setTimeout(() => {
						uni.setStorageSync('ordertype', 0)
						uni.navigateBack({
							delta: 2
						})
					}, 1000)
				}
			}
		})

	}

	function radioChange(evt) {
		data.payobj.pay_type = Number(evt.detail.value)
	}
</script>


<style scoped lang="scss">
	.container {
		padding: 11px 11px 0;
		background-color: #f9f9f9;

		.position {

			height: 99px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: url('https://pili-vod.guanxikeji.com/hemashangcheng/img/1730881665512.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 0px 20px;


			.position-text {
				width: 100%;
				flex: 1;
				padding-top: 11px;
				display: flex;
				justify-content: space-between;

				.left {
					width: 100%;
					font-size: 17px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(0, 0, 0, .85);
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;

					.botm {

						font-size: 13px !important;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: rgba(0, 0, 0, .45);
						margin-top: 11px;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.lefts {
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}


					}
				}

				.right {
					image {

						width: 77px;
						height: 77px;
						background-size: cover;
					}

				}
			}
		}

		.header {
			background-color: #fff;
			padding: 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-image: url('https://img.fubaozx.cn/static/oldImg/1699501708457.png');
			background-repeat: no-repeat;
			background-size: 100% 10upx;
			background-position: bottom;

			.left {
				.address {
					font-size: 28upx;
					color: #333333;
				}

				.addressxx {
					font-size: 32upx;
					color: #333333;
					font-weight: bold;
					margin: 10upx 0;
				}

				.info {
					font-size: 24upx;
					color: #333333;
				}
			}
		}

		.pickupmode-box {
			margin-top: 16px;
			display: flex;
			justify-content: space-between;

			.pickupmode {
				width: 48%;
				height: 77px;
				border-radius: 11px;
				position: relative;
				display: flex;
				align-items: center;
				border: 1px solid #bfbfbf;


				image {
					width: 44px;
					height: 44px;
					margin-left: 22px;
				}

				.pickupmode-info {
					width: 88px;
					font-size: 16px;
					color: rgba(0, 0, 0, .85);
					font-family: PingFang-SC-Medium, PingFang-SC;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-weight: 700;

					text {
						font-size: 13px;
						color: rgba(0, 0, 0, .45);
						margin-top: 2px;
					}
				}

				.pickupmode-checked {
					width: 24px;
					height: 24px;
					position: absolute;
					top: -8px;
					right: -8px;

					border-radius: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.ac {
				border-color: #a7d400;
			}
		}

		.order-info {

			margin-top: 11px;
			padding: 0 11px;
			background-color: #fff;
			border-radius: 11px;
			padding-bottom: 80px;

			.order-info-item {
				padding: 22px 0 11px;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-size: 15px;
				font-weight: 700;
				color: #333;

				text {
					font-size: 13px;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
				}

				.productInfo-item {
					width: 100%;
					display: flex;
					margin-bottom: 22px;

					image {
						max-width: 77px;
						min-width: 77px;
						height: 77px;
						border-radius: 5px;
					}

					.productInfo-item-box {
						flex-grow: 1;
						margin-left: 11px;

						.item-box-title {
							font-size: 17px;
							font-weight: 700;
							font-family: PingFang-SC-Medium, PingFang-SC;
							color: rgba(0, 0, 0, .85);
						}

						.item-box-tips-box {
							.item-box-tips2 {
								font-size: 11px;
								color: rgba(0, 0, 0, .45);
								font-family: PingFang-SC-Medium, PingFang-SC;
								font-weight: 400;
								margin-bottom: 2px;
							}

							.item-box-tips2:nth-child(1) {
								margin-top: 12px;
							}
						}

						.item-box-bottom {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							margin-top: 8px;

							.price {
								font-size: 22px;
								font-weight: 400;
								color: rgba(0, 0, 0, .85);

								text {
									font-size: 13px;
									font-weight: 400;
									margin-right: 2px;
								}

								.txt2 {
									font-size: 13px;
									color: rgba(0, 0, 0, .25);
									margin-left: 5px;
									font-weight: 500;
									text-decoration: line-through;
								}

							}

							.number {
								font-size: 13px;
								color: rgba(0, 0, 0, .25);
								font-weight: 500;
								margin-bottom: 2px;
							}
						}


					}
				}
			}
		}

		.paylist {
			padding: 30upx;
			margin-top: 11px;
			background-color: #fff;
			border-radius: 11px;

			.paylists {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20upx 0;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 40upx;
						height: 40upx;
						margin-right: 20upx;
					}
				}

			}
		}

		.bootm {
			width: 100%;
			display: flex;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 10003;

			.fixed-menu {
				width: 100%;
				height: 66px;
				background: #fff;
				box-shadow: 0px -5px 16px 0px hsla(0, 0%, 94.9%, .8);
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 22px;

				.fixed-menu-price {
					flex: 1;
					display: flex;
					justify-content: flex-start;

					.fixed-menu-money {
						flex: 1;
						height: 66px;
						padding-top: 6px;
						margin-left: 0px;

						.money {
							display: flex;
							align-items: center;

							.fixed-menu-money-font1 {
								font-size: 22px;
								font-family: AlibabaPuHuiTiB;
								color: rgba(0, 0, 0, .85);

							}

							.fixed-menu-money-font1::before {
								content: "￥";
								font-size: 13px;
								color: rgba(0, 0, 0, .85);
							}

							.fixed-menu-money-font1-line {
								margin: 0 8px;
								height: 16px;
								width: 0.5px;
								background-color: #f2f2f2;
							}

							.mingInfo {
								font-size: 13px;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #999;
								display: flex;
								padding-top: 5px;

								.paybtnInfo-icon-up {
									width: 16px;
									height: 16px;
									background-image: url(https://pili-vod.guanxikeji.com/logo/img/1731116006296.png);
									background-size: cover;
								}
							}
						}
					}

					.fixed-menu-price-img {
						width: 77px;
						height: 66px;
						position: relative;

						image {
							width: 77px;
							height: 77px;
							position: absolute;
							top: -11px;
						}
					}

					.fixed-menu-money {
						flex: 1;
						height: 66px;
						padding-top: 6px;
						margin-left: 11px;

						.Al_Bold {
							font-family: webfont !important;
							font-style: normal;
							-webkit-font-smoothing: antialiased;
							-moz-osx-font-smoothing: grayscale;
							display: flex;
							align-items: center;

							.fixed-menu-money-font1 {
								font-size: 22px;
								font-family: AlibabaPuHuiTiB;
								color: rgba(0, 0, 0, .85);

								text {
									font-size: 13px;
									font-family: AlibabaPuHuiTiM;
									color: rgba(0, 0, 0, .25);
									text-decoration: line-through;
									margin-left: 5px;
								}
							}
						}

						.other-tips {
							display: inline-flex;
							height: 17px;
							background: #fff;
							border-radius: 2px;
							font-size: 11px;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #fc2326;
							line-height: 16px;
							padding: 0 5px;
							border: 0.5px solid #fc2326;
							border-color: rgb(209, 33, 40);
							color: rgb(209, 33, 40);
						}

						.fixed-menu-money-font1::before {
							content: "￥";
							font-size: 13px;
							color: rgba(0, 0, 0, .85);
						}
					}


				}

				.fixed-menu-pay {
					width: 132px;
					height: 66px;
					background: #a7d400;
					font-size: 19px;
					font-family: PingFang-SC-Heavy, PingFang-SC;
					font-weight: 800;
					color: #fff;
					line-height: 66px;
					text-align: center;
				}
			}
		}
	}

	.Al_Medium {
		font-family: Medium !important;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.Al_Bold {
		font-family: webfont !important;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
</style>
